<template>
    <div class="browse">
       <v-header :title="$t('title.myBrowse')"></v-header>
          <div>
            <tab :line-width="2" class="tabItem">
                <tab-item :selected="selected === index" v-for="(item, index) in listTab" :key="index" @on-item-click="selectTabEvery">{{item}}</tab-item>
            </tab>
          </div>
            <scroll ref="scroll" style="overflow: hidden;"
            :style="{height: scrollHeight}"
            v-if="selected === 0"
            :data="browseList"
            :scrollbar="false"
            :pullDownRefresh="true"
            :pullUpLoad="true"
            @pullingDown="onPullingDown"
            @pullingUp="onPullingUp">
            <div>
                    <div style="margin: 16px 10px;overflow: hidden;" class="collectiondiv" v-for="item in browseList" :key="item.id" @click="handleClickProductDesc(item.targetId,item.type)">
                    <masker style="border-radius: 2px;" color="F9C90C" :opacity="0">
                        <div class="m-img" v-lazy:backgroundImage="item.thumbUrl"></div>
                        <div slot="content" class="m-title">
                        <p>{{item.name}}{{item.title}}
                        <br/>
                        <span class="m-time">{{item.createAt.substring(0,10)}}</span>
                        </p>
                        </div>
                    </masker>
                    <div class="collTwo">
                        <flexbox :gutter="0" class="orderflexbox">
                        <flexbox-item>
                            <div class="flex-demo-o">
                                <p class="nameWrapper">{{item.name}}</p>
                            </div>
                        </flexbox-item>
                    </flexbox>
                    <hr class="orderhrtwo">
                    <flexbox :gutter="0" class="orderflexbox">
                        <flexbox-item :span='5/6'>
                            <div class="flex-demo-o">
                              <p class="collectiontext" @click.stop="goToMap(item.latitude, item.longitude, item.address)"> <i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp;{{item.address}}</p>
                            </div>
                        </flexbox-item>
                        <flexbox-item :span='1/6'>
                            <div class="flex-demo-or" v-if="item.collectionType == 1">
                              <i class="fa fa-star" aria-hidden="true" @click.stop="handleClickStar(item.id, 0)"></i>
                            </div>
                            <div class="flex-demo-or" v-if="item.collectionType != 1">
                              <i class="fa fa-star-o" aria-hidden="true" @click.stop="handleClickStar(item.id, 0)"></i>
                            </div>
                        </flexbox-item>
                    </flexbox>
                    </div>
              </div>

              <not-data v-if="browseList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="getBrowseList(true)"></not-data>

            </div>
        </scroll>

        <!-- 我预览的游记 -->
      <scroll :style="{height: travelScrollHeight}" ref="travelScroll" style="overflow: hidden;height: 100%"
        :data="travelList"
        :scrollbar="false"
        :pullDownRefresh="true"
        :pullUpLoad="true"
        @pullingDown="onPullingTravelDown"
        @pullingUp="onPullingTravelUp"
        v-if="selected === 1">
        <div>
               <div class="travelTabWrapper" v-for="item in travelList" :key="item.id"  @click="handleGoTravelDesc(item.targetId)">
                <div class="travelTabTop">
                    <div class="travelTabTopLeft">
                        <p>{{item.title}}</p>
                    </div>
                    <div class="travelTabTopRight" v-if="item.collectionType == 1">
                        <i class="fa fa-star" aria-hidden="true" @click.stop="handleClickStar(item.id, 2)"></i>
                    </div>
                     <div class="travelTabTopRight" v-if="item.collectionType != 1">
                        <i class="fa fa-star-o" aria-hidden="true" @click.stop="handleClickStar(item.id, 2)"></i>
                    </div>
                </div>
                <div class="travelInfo">
                    <div class="travelInfoLeft">
                        <div class="travelInfoLeftOne" @click.stop="handlePersonalInfo(item.userId)">
                            <img :src="item.headUrl" alt="" style="width:40px;height:40px;border-radius: 50%;">
                        </div>
                        <div class="travelInfoLeftTwo">
                            <p>{{item.nickname}}</p>
                        </div>
                    </div>
                    <div class="travelInfoRight">
                        <div class="travelInfoRightOne">
                            <p>{{item.browseCount}}浏览</p>
                        </div>
                        <div class="travelInfoRightTwo">
                            <p>{{item.commentCount > 0 ? item.commentCount : 0}}评论</p>
                        </div>
                    </div>
                </div>
                <div class="travelImageWrapper">
                   <div class="travelImage" :style="{backgroundImage:`url(${item.firstImg})`}">
                   </div>
                </div>
            </div>
            <not-data v-if="travelList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="handleGetTravelList(true)"></not-data>
        </div>
      </scroll>

     <!--我阅览的攻略的模块 -->
      <scroll :style="{height: strategyScrollHeight}" ref="strategyScroll" style="overflow: hidden;height: 100%"
            :data="strategyList"
            :scrollbar="false"
            :pullDownRefresh="true"

            :pullUpLoad="true"
            @pullingDown="onPullingStrategyDown"
            @pullingUp="onPullingStrategyUp"
            v-if="selected === 2">
          <div>
                <div class="strategyWrapper" v-for="item in strategyList" :key="item.id"  @click="handleGoStrategyDesc(item.targetId)">
                      <div class="imgWrapper" :style="{backgroundImage:`url(${item.firstImg})`}">
                      </div>
                      <div class="textWrapper">
                          <p>{{item.title}}</p>
                      </div>
                      <div class="positionWrapper">
                        <div class="positionWrapperLeft">
                          <p>{{item.addressName}}</p>
                        </div>
                        <div class="positionWrapperRight" v-if="item.collectionType == 1">
                          <i class="fa fa-star" aria-hidden="true" @click.stop="handleClickStar(item.id, 3)"></i>
                        </div>
                        <div class="positionWrapperRight" v-if="item.collectionType != 1">
                          <i class="fa fa-star-o" aria-hidden="true" @click.stop="handleClickStar(item.id, 3)"></i>
                        </div>
                      </div>
                      <div class="bottomStrategy">
                          <div class="countWrapper">
                              <p>{{item.browseCount}}次浏览</p>
                          </div>
                          <div class="timeWrapper">
                              <p>{{item.publishTime}}</p>
                          </div>
                      </div>
                  </div>
                  <not-data v-if="strategyList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="handleGetStrategyList(true)"></not-data>
          </div>
      </scroll>

        <actionsheet v-model="showMap" :menus="menusMap" :show-cancel="showCancel" @on-click-menu="handleClickMenu"></actionsheet>

        <div class="alertWrapper">
            <div>
              <confirm v-model="showGaoDei"
              title="操作提示"
              @on-cancel="onCancelGaoDei"
              @on-confirm="onConfirmGaoDei">
                  <p style="text-align:center;">您尚未安装常用地图，小嗨为您推荐安装高德地图</p>
              </confirm>
            </div>
        </div>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { Masker, Flexbox, FlexboxItem, Confirm, Actionsheet, Tab, TabItem } from 'vux'
import Scroll from '@/components/scroll/scroll'
import axios from '@/api/axiosApi'
import { mapGetters, mapMutations } from 'vuex'
import notData from '@/components/not-data/not-data'
import { isIOS, isIphoneX } from '@/assets/js/brower'
import { localUser } from '@/assets/js/local'
import { QINIU_PREFIX } from '@/api/config'

export default {
  data () {
    return {
      browseList: [],
      user: {},
      // 跳转地图
      showMap: false,
      menusMap: {},
      showGaoDei: false,
      // 经度纬度
      latitude: '',
      longitude: '',
      address: '',
      showCancel: true,
      listTab: [this.$t('tab.scenicOrHotel'), this.$t('tab.travels'), this.$t('tab.strategy')],
      travelList: [],
      strategyList: [],
      scrollHeight: '500px',
      travelScrollHeight: '500px',
      strategyScrollHeight: '500px'
    }
  },
  computed: {
    ...mapGetters({
      selected: 'browseTab'
    })
  },
  methods: {
    ...mapMutations({
      setBrowseTab: 'SET_BROWSE_TAB'
    }),
    handleClickProductDesc (id, type) {
      if (type === 5) {
        this.$router.push('/hotel/' + id)
      } else {
        this.$router.push('/scenic/' + id)
      }
    },
    // 获取已经浏览过的列表
    getBrowseList (isFirst) {
      const userId = localUser.get('id')
      axios.get(this, '/v1/messageRecords/' + userId, {pageNum: this.pageNum, pageSize: this.pageSize, type: 0}, (data) => {
        if (data.length > 0) {
          data.forEach(item => {
            if (item.atlas) {
              const tmp = item.atlas.split(';')[0]
              if (tmp) {
                item.imgUrl = tmp.indexOf(QINIU_PREFIX) > -1 ? tmp + '-meitu1' : tmp
              }
            }
          })
        }
        if (isFirst) {
          this.browseList = data
          return
        }
        if (data.length === 0) {
          if (this.$refs.scroll && this.pageNum > 0 && this.$refs.scroll) {
            this.$refs.scroll.hiddenPullUpLoad()
          } else {
            if (this.$refs.scroll) {
              this.$refs.scroll.hiddenPullDown()
            }
          }
        } else {
          if (this.pageNum > 1) {
            this.browseList = this.browseList.concat(data)
          } else {
            this.browseList = data
          }
        }
      })
    },
    handleGetTravelList (isFirst) {
      axios.get(this, '/v1/messageRecords/' + localUser.get('id'), {pageNum: this.travelPageNum, pageSize: this.travelPageSize, type: 2}, (data) => {
        if (isFirst) {
          this.travelList = data
          return
        }
        if (data.length === 0) {
          if (this.travelPageNum === 1 && this.$refs.travelScroll) {
            this.$refs.travelScroll.hiddenPullDown()
          } else {
            this.travelPageNum--
            if (this.$refs.travelScroll) {
              this.$refs.travelScroll.hiddenPullUpLoad()
            }
          }
        } else {
          if (this.travelPageNum > 1) {
            this.travelList = this.travelList.concat(data)
          } else {
            this.travelList = data
          }
        }
      })
    },
    handleGetStrategyList (isFirst) {
      axios.get(this, '/v1/messageRecords/' + localUser.get('id'), {pageNum: this.strategyPageNum, pageSize: this.strategyPageSize, type: 3}, (data) => {
        console.log(data)
        if (isFirst) {
          this.strategyList = data
        }
        if (data.length === 0) {
          // this.$vux.toast.text('没有更多数据了', 'middle')
          if (this.strategyPageNum === 1 && this.$refs.strategyScroll) {
            this.$refs.strategyScroll.hiddenPullDown()
          } else {
            this.strategyPageNum--
            if (this.$refs.strategyScroll) {
              this.$refs.strategyScroll.hiddenPullUpLoad()
            }
          }
        } else {
          if (this.strategyPageNum > 1) {
            this.strategyList = this.strategyList.concat(data)
          } else {
            this.strategyList = data
          }
        }
      })
    },
    handleClickStar (id, type) {
      if (type === 0) {
        const findIndex = this.browseList.findIndex(item => {
          return item.id === id
        })
        if (findIndex > -1) {
          this.browseList[findIndex].collectionType = this.browseList[findIndex].collectionType ? 0 : 1
          axios.put(this, '/v1/messageRecord', {id: id, collectionType: this.browseList[findIndex].collectionType}, (data) => {
            if (this.browseList[findIndex].collectionType === 1) {
              this.$vux.toast.text('收藏成功')
            } else {
              this.$vux.toast.text('取消收藏成功')
            }
          })
        }
      } else if (type === 2) {
        const findIndex = this.travelList.findIndex(item => {
          return item.id === id
        })
        if (findIndex > -1) {
          this.travelList[findIndex].collectionType = this.travelList[findIndex].collectionType ? 0 : 1
          axios.put(this, '/v1/messageRecord', {id: id, collectionType: this.travelList[findIndex].collectionType}, (data) => {
            if (this.travelList[findIndex].collectionType === 1) {
              this.$vux.toast.text('收藏成功')
            } else {
              this.$vux.toast.text('取消收藏成功')
            }
          })
        }
      } else if (type === 3) {
        const findIndex = this.strategyList.findIndex(item => {
          return item.id === id
        })
        if (findIndex > -1) {
          this.strategyList[findIndex].collectionType = this.strategyList[findIndex].collectionType ? 0 : 1
          axios.put(this, '/v1/messageRecord', {id: id, collectionType: this.strategyList[findIndex].collectionType}, (data) => {
            if (this.strategyList[findIndex].collectionType === 1) {
              this.$vux.toast.text('收藏成功')
            } else {
              this.$vux.toast.text('取消收藏成功')
            }
          })
        }
      }
    },
    onPullingUp () {
      this.pageNum++
      this.getBrowseList()
    },
    onPullingDown () {
      this.pageNum = 1
      this.getBrowseList()
    },
    onPullingTravelUp () {
      this.travelPageNum++
      this.handleGetTravelList()
    },
    onPullingTravelDown () {
      this.travelPageNum = 1
      this.handleGetTravelList()
    },
    onPullingStrategyDown () {
      this.strategyPageNum = 1
      this.handleGetStrategyList()
    },
    onPullingStrategyUp () {
      this.strategyPageNum++
      this.handleGetStrategyList()
    },
    // 高德地图
    goToMap (latitude, longitude, address) {
      if (isIOS()) {
        window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'openMapNavi', 'latitude': latitude, 'longitude': longitude})
      } else {
        // android
        this.menusMap = JSON.parse(window.android.isInstallByread())
        if (this.menusMap == null || Object.getOwnPropertyNames(this.menusMap).length === 1) {
          this.showCancel = false
          this.showGaoDei = true
          return
        }
        if (this.menusMap.baiDu === '2') {
          this.menusMap.baiDu = '百度地图'
        }
        if (this.menusMap.gaoDei === '1') {
          this.menusMap.gaoDei = '高德地图'
        }
        if (this.menusMap.tenXun === '3') {
          this.menusMap.tenXun = '腾讯地图'
        }
        this.showMap = true
        this.latitude = latitude
        this.longitude = longitude
        this.address = address
      }
    },
    // 点击菜单跳转
    handleClickMenu (value) {
      if (value === 'baiDu') {
        window.android.makeUpMap(this.latitude, this.longitude, this.address, 2, 1, '')
      } else if (value === 'gaoDei') {
        window.android.makeUpMap(this.latitude, this.longitude, this.address, 1, 1, '')
      } else if (value === 'tenXun') {
        window.android.makeUpMap(this.latitude, this.longitude, this.address, 3, 1, '')
      }
    },
    // 确认弹框友好提示
    onCancelGaoDei () {
    },
    onConfirmGaoDei () {
      window.android.makeUpMap(this.latitude, this.longitude, this.address, 0, 1, '')
    },
    selectTabEvery (value) {
      if (value === 0) {
        setTimeout(() => {
          this.$refs.scroll.scrollTo(0, 0)
        }, 80)
      } else if (value === 1) {
        setTimeout(() => {
          this.$refs.travelScroll.scrollTo(0, 0)
        }, 80)
      } else if (value === 2) {
        setTimeout(() => {
          this.$refs.strategyScroll.scrollTo(0, 0)
        }, 80)
      }
      this.setBrowseTab(value)
    },
    handleGoTravelDesc (id) {
      this.$router.push('/address/travels/' + id)
    },
    handleGoStrategyDesc(id) {
      this.$router.push('/address/strategy/' + id)
    },
    handlePersonalInfo (userId) {
      this.$router.push('/user/archives/' + userId)
    }
  },
  components: {
    VHeader,
    Masker,
    Flexbox,
    FlexboxItem,
    Scroll,
    isIOS,
    isIphoneX,
    Confirm,
    Actionsheet,
    Tab,
    TabItem,
    notData
  },
  created () {
    this.pageNum = 1
    this.pageSize = 10
    this.travelPageNum = 1
    this.travelPageSize = 10
    this.strategyPageNum = 1
    this.strategyPageSize = 10
    this.paddingTop = 24
    if (isIphoneX()) {
      this.paddingTop = 34
    }
    this.scrollHeight = window.innerHeight - 84 - this.paddingTop + 'px'
    this.travelScrollHeight = window.innerHeight - 84 - this.paddingTop + 'px'
    this.strategyScrollHeight = window.innerHeight - 84 - this.paddingTop + 'px'
    this.getBrowseList(true)
    this.handleGetTravelList(true)
    this.handleGetStrategyList(true)
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.browse {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  overflow hidden;
}

.m-img {
  padding-bottom: 33%;
  display: block;
  position: relative;
  max-width: 100%;
  background-size: cover;
  background-position: center center;
  background-position 50% 50%
  cursor: pointer;
  border-radius: 2px;
}

.m-title {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  font-weight: 500;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.m-title p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}

.m-time {
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px solid #f0f0f0;
  display: inline-block;
  margin-top: 5px;
}

.collTwo {
    background-color:white;
    padding-top:10px;
    padding-bottom:10px;
}

.flex-demo-o {
    margin-left:10px;
}

.collectiondiv {
    margin-top:20px;
    box-shadow:0px 0px 15px #C5C5C5;
}

.orderhrtwo {
  height:1px;border:none;border-top:1px dashed #C5C5C5;
  margin-top:3px;
}

.flex-demo-or {
    text-align:right;
    margin-right:20px;
}

.collectiontext {
    font-size:14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

.nameWrapper {
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

.travelTabWrapper {
    margin-bottom 16px
    box-shadow: 0px 0px 15px #C5C5C5;
    background-color white
    &:last-child {
      margin-bottom: 0
    }
    .travelTabTop {
        padding-top 15px
        padding-left 15px
        padding-right 15px
        padding-bottom 10px
        display: flex
        justify-content space-between
        .travelTabTopLeft {
            p {
                font-size $font-size-title
                font-weight bold
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
        }
        .travelTabTopRight {
            margin-top 4px
            display flex
        }
    }
    .travelInfo {
        padding-left 15px
        padding-right 15px
        padding-bottom 5px
        display flex
        justify-content space-between
        border-bottom-style solid
        border-width:1px
        border-color: #E4E4E4
        .travelInfoLeft {
            display flex
            .travelInfoLeftOne {

            }
            .travelInfoLeftTwo {
                p {
                    font-size $font-size-small
                    margin-left 10px
                    margin-top 10px
                }
            }
        }
        .travelInfoRight {
            display flex
            .travelInfoRightOne {
                p {
                    font-size $font-size-small
                    margin-top 10px
                }
            }
            .travelInfoRightTwo {
                margin-left: 10px
                p {
                    font-size $font-size-small
                    margin-top 10px
                }
            }
        }
    }
    .travelImageWrapper {
        padding-top 10px
        padding-left 15px
        padding-right 15px
        padding-bottom 10px
      .travelImage {
        width: 100%
        height 200px
        background-size: cover
        background-repeat: no-repeat
        background-position 50% 50%
      }
    }
  }

  .strategyWrapper {
      margin-bottom: 16px
      background-color: white
      padding-top 15px
      padding-left 15px
      padding-right 15px
      padding-bottom 10px
      box-shadow: 0px 0px 15px #C5C5C5
      &:last-child {
        margin-bottom: 0
      }
      .imgWrapper {
        width: 100%
        height 200px
        background-size: cover
        background-repeat: no-repeat
        background-position 50% 50%
      }
      .textWrapper {
          margin-top 5px
          font-weight bold
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
      }
      .positionWrapper {
        margin-top 5px
        display flex
        justify-content space-between
        .positionWrapperLeft {
          p {
            font-size: $font-size-desc
          }
        }
        .positionWrapperRight {

        }
      }
      .bottomStrategy {
          margin-top 3px
          display flex
          justify-content: space-between
          .countWrapper {
              p {
                font-size: $font-size-small
              }
          }
          .timeWrapper {
              p {
                font-size: $font-size-small
              }
          }
      }
  }
</style>
